<template>
  <div class="exter-commun-box">
    <div class="exter-commun-box-filter">
      <el-form ref="form" label-width="80px">
        <div class="table-filter table-filter-home">
          <div>
            <el-form-item label="创建时间:">
              <el-date-picker
                v-model="time"
                clearable
                type="datetimerange"
                value-format="yyyyMMddHHmmss"
                format="yyyy-MM-dd HH:mm"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00']"
              />
            </el-form-item>
          </div>

          <div>
            <el-form-item label="关键词:">
              <el-input v-model="condition.gjc.value" placeholder="标题、创建人姓名"  clearable :maxLength="50" />
            </el-form-item>
          </div>
          <div>
            <el-form-item class="operate-btns">
              <el-button type="primary" size="mini" @click="() => $refs.table.searchForm()"> 查询 </el-button>
              <!-- <el-button type="primary" size="mini">导出</el-button> -->
              <el-button size="mini" @click="reset">重置</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="exter-commun-box-content">
      <div class="table">
        <el-button v-permission="['ZTGL_ADD']" type="primary" size="mini" @click="handleEdit()"> 新增专题 </el-button>
        <comm-table
          :defaultSort="{ prop: 'createTime', order: 'descending' }"
          ref="table"
          :condition="condition"
          :columns="columns"
          url="/v1/subject/search"
        >
          <template slot-scope="{ row }">
            <el-button v-permission="['ZTGL_EDIT']" type="text" @click="handleEdit(row)" :disabled="row.isRelease == '1'"> 编辑 </el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" @click="deleteRow(row)" :disabled="row.isRelease == '1'">删除</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" @click="onPublish(row)" :disabled="row.isRelease == '1'">发布</el-button>
          </template>
        </comm-table>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { subjectDelete, subject } from '@/api/thematic';
import { deepClone,value2Level } from '@/utils/common';
import { BM_DEPT } from '@/common/codeDic';
export default {
  name: 'ThematicManagement',
  data() {
    return {
      BM_DEPT,
      xxlb: [],
      // 列表查询条件
      condition: {
        createTime: {
          value: '',
          op: '='
        },
        gjc: {
          value: '',
          op: '='
        }
      },
      cloneCondition: null,
      time: '',
      // 表格项
      columns: [
        { type: 'index', label: '序号', width: 70 },
        {
          label: '标题',
          prop: 'title',
          render: (h, row) => {
            const _this = this;
            return h('span',{
                class: 'v-link',
                on: {
                  click() {
                    // 隐藏tooltip(由于不自动消失)
                    $('.el-tooltip__popper').css('display', 'none');
                    _this.$router.push({ name: 'ThematicDetail', params: { id: row.id } });
                  }
                }
              },
              row.title
            );
          },
          width: 300
        },
        { label: '创建时间', prop: 'createTime' },
        { 
          label: '创建单位',
          prop: 'createOrgCode',  
          code: BM_DEPT
          //  render:(h,row)=>{
          //   const value=value2Level(this.constant.BM_DEPT,row.createOrgCode);
          //   return h('span',{},value[value.length-1]);
          // }
        },
        { label: '创建人', prop: 'createUserName' },
        {
          label: '状态',
          render: (h, row) => h('span', {}, row.isRelease == '0' ? '未发布' : '已发布')
        },
        { label: '操作', type: 'operate', fixed: 'right' }
      ]
    };
  },
  activated(){
    this.$refs.table.searchForm()
  },
  watch: {
    time(val) {
      this.condition.createTime.value = val ? `${val[0]},${val[1]}` : '';
    }
  },
  computed: {
    ...mapState(['constant'])
  },
  mounted() {
    this.$store.dispatch('getConstant', ['BM_LWDW', 'BM_QSZT']);
    this.$store.dispatch('getConstantTree', ['BM_XXLB']);
    this.cloneCondition = deepClone(this.condition);
  },
  methods: {
    onPublish(row) {
      this.$confirm('确认发布?').then(() => {
        const loadingInstance = this.$loading({
          lock: true,
          text: '发布中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        subject({ ...row, isRelease: '1' })
          .then(() => {
            this.$refs.table.searchForm();
            this.$message.success('发布成功！');
            loadingInstance.close();
          })
          .catch(err => {
            if (err.response.data.statusCode === '200000') {
              this.$message.error('标题重复，无法创建！');
              return;
            }
            this.$message.error('保存失败！');
            loadingInstance.close();
          });
      });
    },
    handleEdit(row) {
      const _that = this;
      const title = (row ? '编辑' : '新增') + '专题';
      this.$dgLayer({
        title,
        content: require('./components/add'),
        props: {
          row
        },
        on: {
          success() {
            _that.$refs.table && _that.$refs.table.reload();
          }
        },
        area: ['820px', 'auto'],
        maxHeight: '80vh',
        resize: false,
        maxmin: false
      });
    },

    /**
     * 删除
     */
    deleteRow({ id }) {
      this.$confirm('确认删除此数据?').then(() => {
        const loadingInstance = this.$loading({
          lock: true,
          text: '删除中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        subjectDelete(id)
          .then(() => {
            this.$refs.table.searchForm();
            this.$message.success('删除成功');
            loadingInstance.close();
          })
          .catch(() => {
            loadingInstance.close();
            this.$message.warning('删除失败');
          });
      });
    },
    /**
     * 重置
     */
    reset() {
      this.time = null;
      this.condition = { ...deepClone(this.cloneCondition) };
      this.$nextTick(() => {
        this.$refs.table.searchForm();
      });
    }
  }
};
</script>
<style scoped lang="scss">
.exter-commun-box-content {
  background: #fff;
  margin-top: 0.6rem;
  .table {
    padding: 20px;
    button {
      margin-bottom: 10px;
    }
  }
}
</style>
